<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <!-- 内部样式 写在head中-->
    <style type="text/css">
        /* 并集选择器 多个选择器之间使用，（英文半角状态）隔开*/
        .word,#s,span{
            color:green;
        }
        /* 交集选择器 格式：01.标签选择器+类选择器   02.标签选择器+ID选择器
            必须是标签选择器在前
            div.word{}  去div标签中查找class属性值为  word的标签
            div#s{} 去div标签中查找id属性为  s的标签
        */
        div.word{
            color:blue;
        }
        /* 后代选择器 必须有层级关系    选择器之前使空格隔开*/
        #dv span{
            color:red;
        }
    </style>
</head>
<body>
    <div>这是一个div1</div>
    <div>这是一个div2</div>

    <div class="word">类选择器</div>
    <div class="word">类选择器</div>

    <div id="s">ID选择器</div>
    <span>div外面的span</span>

    <div id="dv">
        <span>div里面的span标签1</span>
    </div>

    <div>
        <span>div里面的span标签2</span>
    </div>
</body>
</html>